<template>
  <div class="message">
    <div class="main">
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="选择时间区间">
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="pageQuery.status" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findWall">查询</el-button>
            <el-button @click="replace">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteBatch">
              <el-icon><Minus /></el-icon>
              <span>批量删除</span>
            </el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item>
            <el-dropdown @visible-change="getWallBackgrounndList">
              <span class="el-dropdown-link">
                留言背景色
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in bgcList"
                    :key="item.id"
                    :style="{ backgroundColor: item.background }"
                    >{{ item.background }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
          <el-form-item label="新增背景色">
            <el-color-picker
              v-model="bgc"
              show-alpha
              color-format="hex"
              @active-change="bgcBtn = true"
            ></el-color-picker>
            <el-button v-show="bgcBtn" type="success" style="margin-left: 20px" @click="addWallBgc"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="body" v-if="wallInfo.length > 0">
        <el-table :data="wallInfo" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="头像" width="70">
            <template #default="scope">
              <el-avatar :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="用户" width="70" prop="username"></el-table-column>
          <el-table-column
            label="邮箱"
            width="120"
            prop="userEmail"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="留言内容" prop="content" show-overflow-tooltip></el-table-column>
          <el-table-column label="背景色">
            <template #default="scope">
              <span class="bgc" :style="{ backgroundColor: scope.row.background }"></span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="60">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blue' : 'red'"
                @click="updateWallStatus(scope.row.id, scope.row.status === 0 ? 1 : 0)"
                >{{ scope.row.status === 0 ? '启用' : '禁用' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="120"
            show-overflow-tooltip
            prop="createTime"
          ></el-table-column>
          <el-table-column
            label="修改时间"
            width="120"
            show-overflow-tooltip
            prop="updateTime"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                :text="true"
                size="small"
                type="primary"
                @click="getWallById(scope.row.id)"
              >
                查看
              </el-button>
              <el-button :text="true" size="small" type="danger" @click="deleteById(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="wallVisiable" width="700">
          <el-descriptions title="留言详细信息" direction="vertical" border>
            <el-descriptions-item :rowspan="2" :width="120" label="头像" align="center">
              <el-image style="width: 100px; height: 100px" :src="wall.headerUrl"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="用户名">{{ wall.username }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ wall.userEmail }}</el-descriptions-item>
            <el-descriptions-item label="评论时间">{{ wall.createTime }}</el-descriptions-item>
            <el-descriptions-item label="留言时间">
              {{ wall.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="评论内容" width="150">
              {{ wall.content }}
            </el-descriptions-item>
          </el-descriptions>
        </el-dialog>
      </div>
      <el-empty v-else></el-empty>
      <div class="page">
        <el-pagination
          :total="total"
          v-model:current-page="pageQuery.page"
          v-model:page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  addWallBgcService,
  deleteWallBatchService,
  getWallBackgroundService,
  getWallByIdService,
  getWallListService,
  updateWallStatusService,
} from '@/api/Message'
import { Minus, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

const wallInfo = ref([])
const total = ref(0)

const pageQuery = ref({
  page: 1,
  pageSize: 9,
  status: null,
  startTime: '',
  endTime: '',
})
const dateTime = ref('')

const bgcList = ref([])
const bgc = ref('')
const bgcBtn = ref(false)

/**
 * 新增留言背景色
 */
const addWallBgc = () => {
  if (bgc.value !== '') {
    addWallBgcService({
      background: bgc.value,
    })
  } else {
    ElMessage.error('值不能为空')
    return false
  }
}

/**
 * 修改留言状态
 */
const updateWallStatus = (id, status) => {
  updateWallStatusService({
    id,
    status,
  }).then(() => {
    getWallList(pageQuery.value)
  })
}

/**
 * 查询留言详细信息
 */
const wall = ref({})
const wallVisiable = ref(false)
const getWallById = async (id) => {
  wallVisiable.value = true
  const { data } = await getWallByIdService(id)
  wall.value = data
}

/**
 * 根据id删除留言信息
 */
const deleteById = (id) => {
  ElMessageBox.confirm('你确认删除这条留言信息吗?', 'Tip', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    wallIds.value.push(id)
    deleteWallBatchService(wallIds.value).then(() => {
      for (let i = 0; i < wallIds.value.length; i++) {
        if (wallIds.value[i] === id) {
          wallIds.value.splice(i, 1)
          i--
        }
      }
      getWallList(pageQuery.value)
    })
  })
}
/**
 * 批量删除
 */
const wallIds = ref([])
const handleSelectionChange = (row) => {
  const obj = JSON.parse(JSON.stringify(row))
  wallIds.value = []
  obj.forEach((item) => {
    wallIds.value.push(item.id)
  })
  console.log(wallIds.value)
}
const deleteBatch = () => {
  if (wallIds.value.length === 0) {
    ElMessage.error('未选中任何数据')
    return false
  }
  ElMessageBox.confirm(`你确认删除这${wallIds.value.length}条留言数据吗?`, 'Tip', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    deleteWallBatchService(wallIds.value).then(() => {
      getWallList(pageQuery.value)
      wallIds.value = []
    })
  })
}

/**
 * 分页相关
 */
const handlePageSizeChange = (pageSize) => {
  pageQuery.value.pageSize = pageSize
  getWallList(pageQuery.value)
}
const handlePageChange = (page) => {
  pageQuery.value.page = page
  getWallList(pageQuery.value)
}

/**
 * 查询留言信息
 */
const findWall = () => {
  const date = JSON.parse(JSON.stringify(dateTime.value))
  pageQuery.value.startTime = date[0]
  pageQuery.value.endTime = date[1]
  getWallList(pageQuery.value)
}
/**
 * 重置
 */
const replace = () => {
  getWallList({
    page: 1,
    pageSize: 9,
    status: null,
    startTime: '',
    endTime: '',
  })
}

/**
 * 获取留言信息
 * @param query
 */
const getWallList = async (query) => {
  const { data } = await getWallListService(query)
  wallInfo.value = data.records
  total.value = data.total
}
/**
 * 获取留言背景色信息
 */
const getWallBackgrounndList = async (vis) => {
  if (vis === true) {
    const { data } = await getWallBackgroundService()
    bgcList.value = data
  }
}
onMounted(() => {
  getWallList(pageQuery.value)
})
</script>

<style lang="scss" scoped>
.message {
  padding: 15px;
  background-color: #f3f4f5;

  .main {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .header {
      margin: 15px 0px;
      :deep(.el-select__wrapper) {
        width: 150px;
      }

      .el-dropdown-link {
        outline: none;
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
    }

    .body {
      .bgc {
        display: block;
        margin: 0 auto;
        width: 24px !important;
        height: 24px;
        border-radius: 7px;
      }
    }

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}

.blue {
  cursor: pointer;
  color: #37b4fd;
}
.red {
  cursor: pointer;
  color: red;
}

::v-deep.el-table .cell {
  text-align: center !important;
}
</style>